<template>
  <div class="search-bar">
    <el-card>
      <div class="grid-content">
        <div class="grid-content-title">关键词搜索:</div>
        <!-- 输入搜索框带提示 -->
        <el-row style="100%">
          <el-col :span="8">
            <el-input
              v-model="gridContent"
              placeholder="请输入sku编码/产品名/价格/所属品种/包装类型"
              :trigger-on-focus="false"
              @select="handleSelect"
              clearable
              @input="keywordSearch"
            >
            </el-input>
          </el-col>
        </el-row>
        <!-- <el-button type="primary" icon="el-icon-search" @click="searchDevice" size="small"></el-button>   -->
        <!-- <el-button type="info" plain icon="el-icon-search"  @click="keywordSearch"></el-button> -->
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  // 1. name
  // 2. components
  // 3. props
  // 4. data
  // 5. computed
  // 6. watch
  // 7. created
  // 8. mounted
  // 9. update
  // 10. beforeRouteUpdate
  // 11. methods
  name: "OperationsSearchBar",
  // 分类搜索
  props: {
    searchData: {},
  },
  data() {
    return {
      // 时间选择器
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近半年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 分类搜索类别
      Typedata: {},
      date: "",
      gridContent: "",
      searchByTypeProps: {
        // multiple: true,
        expandTrigger: "hover",
      },
    };
  },
  methods: {
    // 输出时间选择器选择时间
    chooseTimeRange(t) {
      // console.log(t);//结果为一个数组，如：["2018-08-04", "2018-08-06"]
      this.$emit("getDataBySelectTime", t);
    },
    // 输出关键词输入框
    keywordSearch() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.$emit("getDataByKeyword", this.gridContent);
      }, 500);
    },
    // 清空框内信息
    // clearInput() {
    //   this.gridContent="";
    //   this.$emit('getDataByKeyword', this.gridContent)
    // },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    
    handleSelect(item) {
      console.log(item);
    },
  },
  watch: {
    searchByTypedata: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.Typedata = newVal;
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.el-col {
  border-radius: 4px;
}

.grid-content {
  /* // border-radius: 4px; */
  min-height: 36px;
}

.grid-content-title {
  font-weight: 500;
  font-size: 14px;
  /* padding-left: 5px; */
  padding: 8px;
  cursor: default;
}

/* 日期选择框的宽度 */
/* .el-date-editor.el-input, .el-date-editor.el-input__inner {
      width: 390px;
  } */
</style>
